রেসপন্সিভ ডিজাইন হলো একটি ওয়েব ডিজাইন কৌশল যা নিশ্চিত করে যে ওয়েবসাইটটি বিভিন্ন ডিভাইসের স্ক্রিন সাইজ অনুযায়ী মানিয়ে নিতে পারে। এটি ব্যবহারকারীর ডিভাইস যেমন ডেস্কটপ, ট্যাবলেট বা স্মার্টফোনে ভিন্ন ভিন্ন লেআউট উপস্থাপন করতে সাহায্য করে।
রেসপন্সিভ ডিজাইন মূলত CSS এর মাধ্যমে পরিচালিত হয় এবং এতে মিডিয়া কুয়েরি (Media Query), ফ্লেক্সবক্স (Flexbox), গ্রিড লেআউট (Grid Layout), এবং রেসপন্সিভ ইমেজ (Responsive Images) এর মতো টেকনিক ব্যবহার করা হয়।
ফ্লুইড লেআউট ডিজাইন এমনভাবে তৈরি হয় যে এটি স্ক্রিন সাইজ অনুযায়ী প্রস্থ (width) পরিবর্তন করে। এজন্য % বা vw/vh ইউনিট ব্যবহার করা হয়:
.container {
width: 80%; /* পেজের ৮০% অংশ দখল করবে */
margin: 0 auto;
}
মিডিয়া কুয়েরি ব্যবহার করে স্ক্রিন সাইজ অনুযায়ী আলাদা স্টাইল নির্ধারণ করা যায়:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
@media (max-width: 480px) {
body {
background-color: lightgreen;
}
}
ফ্লেক্সবক্সের মাধ্যমে সহজেই রেসপন্সিভ লেআউট তৈরি করা যায়:
.container {
display: flex;
flex-wrap: wrap; /* ইলিমেন্টগুলো সাইজ অনুযায়ী ভেঙে যায় */
justify-content: space-around;
}
গ্রিড লেআউট একটি আধুনিক পদ্ধতি যা রেসপন্সিভ লেআউট ডিজাইন করতে ব্যবহৃত হয়:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
ইমেজের সাইজ স্ক্রিন অনুযায়ী পরিবর্তনের জন্য CSS এর max-width এবং height ব্যবহার করা হয়:
img {
max-width: 100%; /* ইমেজ কন্টেইনারের চেয়ে বড় হবে না */
height: auto; /* অনুপাত বজায় রাখবে */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px;
margin: 10px;
background: lightgray;
padding: 20px;
text-align: center;
}
@media (max-width: 768px) {
.item {
flex: 1 1 100%; /* ছোট স্ক্রিনে ইলিমেন্ট পূর্ণ প্রস্থ নেবে */
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
</div>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
এটি ডিভাইস স্ক্রিন অনুযায়ী সাইটের প্রস্থ নির্ধারণ করে।
px এর পরিবর্তে %, em, বা vw/vh ব্যবহার করুন।রেসপন্সিভ সিএসএসের মাধ্যমে ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স উন্নত হয় এবং এটি মোবাইল ফ্রেন্ডলি ডিজাইন তৈরির জন্য অত্যন্ত কার্যকর।
রেসপন্সিভ ডিজাইন হলো একটি ওয়েব ডিজাইন কৌশল যা নিশ্চিত করে যে ওয়েবসাইটটি বিভিন্ন ডিভাইসের স্ক্রিন সাইজ অনুযায়ী মানিয়ে নিতে পারে। এটি ব্যবহারকারীর ডিভাইস যেমন ডেস্কটপ, ট্যাবলেট বা স্মার্টফোনে ভিন্ন ভিন্ন লেআউট উপস্থাপন করতে সাহায্য করে।
রেসপন্সিভ ডিজাইন মূলত CSS এর মাধ্যমে পরিচালিত হয় এবং এতে মিডিয়া কুয়েরি (Media Query), ফ্লেক্সবক্স (Flexbox), গ্রিড লেআউট (Grid Layout), এবং রেসপন্সিভ ইমেজ (Responsive Images) এর মতো টেকনিক ব্যবহার করা হয়।
ফ্লুইড লেআউট ডিজাইন এমনভাবে তৈরি হয় যে এটি স্ক্রিন সাইজ অনুযায়ী প্রস্থ (width) পরিবর্তন করে। এজন্য % বা vw/vh ইউনিট ব্যবহার করা হয়:
.container {
width: 80%; /* পেজের ৮০% অংশ দখল করবে */
margin: 0 auto;
}
মিডিয়া কুয়েরি ব্যবহার করে স্ক্রিন সাইজ অনুযায়ী আলাদা স্টাইল নির্ধারণ করা যায়:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
@media (max-width: 480px) {
body {
background-color: lightgreen;
}
}
ফ্লেক্সবক্সের মাধ্যমে সহজেই রেসপন্সিভ লেআউট তৈরি করা যায়:
.container {
display: flex;
flex-wrap: wrap; /* ইলিমেন্টগুলো সাইজ অনুযায়ী ভেঙে যায় */
justify-content: space-around;
}
গ্রিড লেআউট একটি আধুনিক পদ্ধতি যা রেসপন্সিভ লেআউট ডিজাইন করতে ব্যবহৃত হয়:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
ইমেজের সাইজ স্ক্রিন অনুযায়ী পরিবর্তনের জন্য CSS এর max-width এবং height ব্যবহার করা হয়:
img {
max-width: 100%; /* ইমেজ কন্টেইনারের চেয়ে বড় হবে না */
height: auto; /* অনুপাত বজায় রাখবে */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px;
margin: 10px;
background: lightgray;
padding: 20px;
text-align: center;
}
@media (max-width: 768px) {
.item {
flex: 1 1 100%; /* ছোট স্ক্রিনে ইলিমেন্ট পূর্ণ প্রস্থ নেবে */
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
</div>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
এটি ডিভাইস স্ক্রিন অনুযায়ী সাইটের প্রস্থ নির্ধারণ করে।
px এর পরিবর্তে %, em, বা vw/vh ব্যবহার করুন।রেসপন্সিভ সিএসএসের মাধ্যমে ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স উন্নত হয় এবং এটি মোবাইল ফ্রেন্ডলি ডিজাইন তৈরির জন্য অত্যন্ত কার্যকর।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
